<template>
	<view class="salesBox">
		<up-sticky>
		<Header></Header>
		</up-sticky>
		<view class="main">
			<view class="boxOne">
				<view class="boxOneTop">
					<view class="ContentTitle">
						白名单电销卡
					</view>
					<view class="ContentTexBox">
						<view class="ContentTex">
							. 可搭配电话机器人，群呼系统试用
						</view>
						<view class="ContentTex">
							. 一卡在手，电销无忧
						</view>
					</view>
					<view class="ContentBut" @click="handleShowSignup">
						申请试用
					</view>
				</view>
				<view class="boxOneBott">
					<view class="bottonBox">
						<view class="bottonBox-title">
							助力企业提升效率
						</view>
						<view class="bottonBox-content">
							<view class="contentImg">
								<view class="contentImg-top">
									<view class="top-left">
										70
									</view>
									<view class="rightBox">
										<view class="rightBox-top">
											<image src="../../static/sales/salesImg2.png" mode=""></image>
										</view>
										<view class="rightBox-xia">
											%
										</view>
									</view>
								</view>
								<view class="contentImg-xia">
									行业覆盖率
								</view>
							</view>
							<view class="contentImg">
								<view class="contentImg-top">
									<view class="top-left">
										60
									</view>
									<view class="rightBox">
										<view class="rightBox-top">
											<image src="../../static/sales/salesImg2.png" mode=""></image>
										</view>
										<view class="rightBox-xia">
											%
										</view>
									</view>
								</view>
								<view class="contentImg-xia">
									转化率提升
								</view>
							</view>
							<view class="contentImg">
								<view class="contentImg-top">
									<view class="top-left">
										40
									</view>
									<view class="rightBox">
										<view class="rightBox-top">
											<image src="../../static/sales/salesImg3.png" mode=""></image>
										</view>
										<view class="rightBox-xia">
											%
										</view>
									</view>
								</view>
								<view class="contentImg-xia">
									成本降低
								</view>
							</view>
							<view class="contentImg">
								<view class="contentImg-top">
									<view class="top-left">
										95
									</view>
									<view class="rightBox">
										<view class="rightBox-top">
											<image src="../../static/sales/salesImg2.png" mode=""></image>
										</view>
										<view class="rightBox-xia">
											%
										</view>
									</view>
								</view>
								<view class="contentImg-xia">
									客户满意度
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="boxOneCenter">
					<view class="centerBox">
						<view class="centerBoxText">
							数字化
						</view>
						<view class="centerBoxText">
							智能化
						</view>
						<view class="centerBoxText">
							高效化
						</view>
					</view>
				</view>
			</view>
			
			<view class="boxTwo">
			
			</view>
			<view class="boxThree">
				<view class="boxThree-text">
					防封电销卡与营业厅普通卡区别
				</view>
				<view class="boxThreeContent">
					<view class="ContentBox">
						<view class="ContentBox-left">
							<view class="top">
								<view class="topImg">
									<image src="../../static/sales/salesImg6.png" mode=""></image>
								</view>
								<view class="topText">
									营业厅普通卡
								</view>
							</view>
							<view class="bott">
								<view class="bottBox">
									<view class="bottBox-text">
										一天打20-30通就封号
									</view>
									<view class="bottBox-icon">
			
									</view>
								</view>
								<view class="bottBox">
									<view class="bottBox-text">
										封号只能去营业厅解封
									</view>
									<view class="bottBox-icon">
			
									</view>
								</view>
								<view class="bottBox">
									<view class="bottBox-text">
										标记问题很难清除
									</view>
									<view class="bottBox-icon">
			
									</view>
								</view>
								<view class="bottBox">
									<view class="bottBox-text">
										注销要去营业厅办理
									</view>
									<view class="bottBox-icon">
			
									</view>
								</view>
								<view class="bottBox">
									<view class="bottBox-text">
										归属地只能选择本地
									</view>
									<view class="bottBox-icon">
			
									</view>
								</view>
							</view>
						</view>
						<view class="ContentBox-right">
							<view class="top">
								<view class="topText">
									防封电销卡
								</view>
								<view class="topImg">
									<image src="../../static/sales/salesImg7.png" mode=""></image>
								</view>
							</view>
							<view class="bott">
								<view class="bottBox">
									<view class="iconfonts">
										<view class="iconfont fa-duigou">
			
										</view>
									</view>
									<view class="bottBox-text">
										每天呼出500+不封号
									</view>
								</view>
								<view class="bottBox">
									<view class="iconfonts">
										<view class="iconfont fa-duigou">
			
										</view>
									</view>
									<view class="bottBox-text">
										高频不封卡封号
									</view>
								</view>
								<view class="bottBox">
									<view class="iconfonts">
										<view class="iconfont fa-duigou">
									
										</view>
									</view>
									<view class="bottBox-text">
										可免费去除标记
									</view>
			
			
								</view>
								<view class="bottBox">
									<view class="iconfonts">
										<view class="iconfont fa-duigou">
									
										</view>
									</view>
									<view class="bottBox-text">
										线上即可办理注销
									</view>
			
								</view>
								<view class="bottBox">
									<view class="iconfonts">
										<view class="iconfont fa-duigou">
			
										</view>
									</view>
									<view class="bottBox-text">
										全国多归属地可定制
									</view>
								</view>
							</view>
						</view>
						<view class="ContentBox-center">
						<image src="../../static/sales/salesImg8.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="boxFour">
				<view class="boxFour-title">
					快速提高企业销售效率
				</view>
				<view class="boxFourContent">
					
				</view>
			</view>
			
			<view class="boxFive">
				<view class="boxFive-title">
					智能搭配，让外呼更轻松
				</view>
				<view class="boxFiveContent">
					<view class="ContentTextItem">
						为企业提供智能化个性服务
					</view>
					<view class="ContentTextItem">
						支持手机外显本地号码
					</view>
					<view class="ContentTextItem">
						快速获取精准客户资源
					</view>
					<view class="ContentTextItem">
						双并发外呼 随插即用！
					</view>
					<view class="ContentTextItem">
						操作简单，接通率高
					</view>
					<view class="ContentTextItem">
						可搭配电话机器人或群呼系统试用
					</view>
					<view class="ContentTextItem">
						深度覆盖各销售岗位，全行业适配！
					</view>
				</view>
			</view>
			<view class="boxSix">
				<view class="boxSixContent">
					
				</view>
			</view>
			<Footer></Footer>
			
			<up-modal :show="showSignUp" @confirm="handleConfirm" title="立即试用" ref="uModal" @cancel="handleClose"
				showCancelButton cancelText="取消" confirmText="立即拨打">
			<view class="hello">
			    <view class="iconfont fa-bodadianhua"></view>
			    <view>电话联系:</view>
			    <view>13261388898</view>
			  </view>
			</up-modal>
		</view>
	</view>
</template>

<script setup>
	import Header from '../compontents/header.vue'
	import Footer from '../compontents/footer.vue'
	import {
		ref
	} from 'vue'
	import api from '../../utils/request.js'
	const showSignUp = ref(false)
	const uToastRef = ref(null)
	const signRefForm = ref(null)
	const handleShowSignup = function() {
		showSignUp.value = true;
	}
	const handleClose = function() {
		showSignUp.value = false;
	}
	const handleConfirm = function() {
		uni.makePhoneCall({
		        phoneNumber: '13261388898', // 电话号码
		        success: function () {
		          console.log('拨打电话成功');
		        },
		        fail: function () {
		          console.log('拨打电话失败');
		        }
		      });
	
	}
</script>

<style lang="scss" scoped>
	:deep(.u-form-item__body__left__content__label) {
		font-size: 25rpx;
	}
	
	:deep(.uni-input-placeholder) {
		font-size: 24rpx;
	}
	:deep(.u-input__content__field-wrapper__field){
		height: 0;
	}
	:deep(.u-modal__button-group__wrapper__text){
		font-size: 28rpx;
	}
	:deep(.u-modal__title){
		font-size: 28rpx;
	}
	.hello {
	  width: 100%;
	  height: 60px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  gap: 10px;
	  font-size: 16px;
	  .fa-bodadianhua {
	    color: #006bec;
	  }
	}
	@import '@/static/icon/iconfont.css';
	.salesBox {
		width: 100%;
		
		.main{
			width: 100%;
			overflow-x: hidden;
		}

		.boxOne {
			height: 760rpx;
			position: relative;

			.boxOneTop {
				height: 425rpx;
				background-image: url('../../static/sales/salesImg1.png');
				background-repeat: no-repeat;
				background-position: center center;
				background-size: cover;
				padding-left: 68rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;


				.ContentTitle {
					color: #fff;
					font-size: 63rpx;
					font-weight: 600;
					text-shadow: 0 0 15rpx #272822;
				}

				.ContentTexBox {
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: #fff;
					font-size: 23rpx;
					font-weight: 500;
					gap: 6rpx;
				}

				.ContentBut {
					font-size: 24rpx;
					font-weight: 550;
					width: 175rpx;
					height: 58rpx;
					line-height: 58rpx;
					text-align: center;
					color: #1e49d4;
					border-radius: 9rpx;
					background-color: #fff;
				}
			}

			.boxOneBott {
				background-color: #fcfcfc;
				height: calc(100% - 425rpx);
				padding-top: 29rpx;

				.bottonBox {
					height: calc(100% - 29rpx);

					.bottonBox-title {
						height: 119rpx;
						line-height: 119rpx;
						text-align: center;
						font-size: 35rpx;
						font-weight: 600;
					}

					.bottonBox-content {
						height: calc(100% - 119rpx);
						display: flex;
						padding: 0 18rpx;
						justify-content: space-evenly;
						align-items: center;

						.contentImg {
							width: calc(25% - 36rpx);
							height: 123rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							.contentImg-top {
								display: flex;
								gap: 8rpx;

								.top-left {
									font-size: 63rpx;
									color: #1e49d4;
								}

								.rightBox {
									display: flex;
									flex-direction: column;
									align-items: center;
									justify-content: center;

									.rightBox-top {
										width: 30rpx;
										height: 40rpx;

										image {
											width: 100%;
											height: 100%;
										}
									}

									.rightBox-xia {
										color: #1e49d4;
										font-size: 23rpx;
									}
								}
							}

							.contentImg-xia {
								font-size: 22rpx;
								color: #959595;
							}
						}
					}
				}
			}

			.boxOneCenter {
				position: absolute;
				top: 425rpx;
				left: 0;
				width: 100%;
				height: 62rpx;
				transform: translateY(-50%);
				padding: 0 20rpx;

				.centerBox {
					width: calc(100% - 40rpx);
					height: 100%;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					border: 1rpx solid #eee;
					border-radius: 16rpx;
					background-color: #fff;

					.centerBoxText {
						font-size: 26rpx;
						font-weight: 560;
					}
				}
			}
		}

		.boxTwo {
			height: 655rpx;
			background-image: url('../../static/sales/salesImg11.png');
			background-size: 100%;
			background-position: center center;
			background-repeat: no-repeat;
		}

		.boxThree {
			height: 660rpx;

			.boxThree-text {
				height: 144rpx;
				line-height: 144rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
			}

			.boxThreeContent {
				height: calc(100% - 144rpx);
				padding: 0 25rpx;

				.ContentBox {
					width: 100%;
					height: 100%;

					display: flex;
					gap: 19rpx;
					position: relative;
					.ContentBox-center {
						position: absolute;
						left: 50%;
						top: 35rpx;
						width: 120rpx;
						height: 148rpx;
						transform: translate(-50% ,-50%);
						image {
							width: 100%;
							height: 100%;
						}
					}

					.ContentBox-left {
						width: 50%;
						height: 100%;
						border: 1rpx solid #eee;
						border-radius: 15rpx;

						.top {
							height: 125rpx;
							background-color: #e6e6e6;
							display: flex;
							align-items: center;
							justify-content: center;
							gap: 10rpx;

							.topImg {
								width: 67rpx;
								height: 87rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.topText {
								font-size: 28rpx;
								font-weight: 600;
								color: #313334;
							}
						}

						.bott {
							height: calc(100% - 125rpx);
							padding-right: 17rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-evenly;
							align-items: self-end;
							background-color: #fff;

							.bottBox {
								display: flex;
								gap: 12rpx;

								.bottBox-text {
									color: #898989;
									font-size: 23rpx;
									font-weight: 550;
								}

								.bottBox-icon {
									width: 30rpx;
									height: 30rpx;
									border-radius: 50%;
									line-height: 30rpx;
									text-align: center;
									font-size: 22rpx;
									color: #ccc;
									font-weight: 600;
									background-color: #959494;
									position: relative;

									&:before {
										content: "";
										width: 20rpx;
										height: 6rpx;
										background-color: #fff;
										position: absolute;
										top: 50%;
										left: 50%;
										transform: translate(-50%, -50%);
									}
								}
							}

						}
					}

					.ContentBox-right {
						width: 50%;
						height: 100%;
						border: 1rpx solid #eee;
						border-radius: 18rpx;

						.top {
							height: 125rpx;
							background-color: #5e83fc;
							display: flex;
							align-items: center;
							border-radius: 10rpx 10rpx 0 0;
							justify-content: center;
							gap: 10rpx;

							.topImg {
								width: 77rpx;
								height: 80rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.topText {
								font-size: 30rpx;
								font-weight: 600;
								color: #fff;
							}
						}

						.bott {
							height: calc(100% - 125rpx);
							padding-left: 17rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-evenly;
							align-items: self-start;
							background-color: #fff;

							.bottBox {
								display: flex;
								gap: 12rpx;

								.bottBox-text {
									color: #333333;
									font-size: 23rpx;
									font-weight: 550;
								}
								.iconfonts {
									width: 30rpx;
									height: 30rpx;
									border-radius: 50%;
									line-height: 30rpx;
									text-align: center;
									background-color: #4bd67b;
									.fa-duigou {
										font-size: 22rpx;
										color: #ccc;
										font-weight: 600;
									}
								}

							}

						}
					}
				}
			}
		}
		
		.boxFour {
			height: 738rpx;
			.boxFour-title {
				height: 182rpx;
				line-height: 182rpx;
				text-align: center;
				font-weight: 600;
				font-size: 32rpx;
			}
			.boxFourContent {
				height: calc(100% - 182rpx);
				background-image: url('../../static/sales/salesImg9.png');
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center center;
			}
		}
		
		.boxFive {
			height: 692rpx;
			.boxFive-title {
				height: 178rpx;
				line-height: 178rpx;
				text-align: center;
				font-weight: 600;
				font-size: 32rpx;
			}
			.boxFiveContent {
				height: calc(100% - 178rpx);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-evenly;
				background-color: #f5f9fd;
				.ContentTextItem {
					font-size: 30rpx;
					// color: #393c3d;
					font-weight: 340;
				}
			}
		}
		.boxSix {
			height: 509rpx;
			padding: 33rpx 46rpx 52rpx 31rpx;
			.boxSixContent {
				width: 100%;
				height: 100%;
				background-image: url('../../static/sales/salesImg10.png');
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center center;
			}
		}
	}
</style>